<template>
  <div id="home">
    <div style="position: relative">
      <NumMap />

      <div class="wrapper leftCharts">
        <div class="wrapper-content">
          <dv-border-box-13>
            <ClassChart />
          </dv-border-box-13>
        </div>
        <div class="wrapper-content">
          <dv-border-box-12>
            <DiningChart />
          </dv-border-box-12>
        </div>
        <div class="wrapper-content">
          <dv-border-box-12>
            <SceneryChart />
          </dv-border-box-12>
        </div>
      </div>

      <div class="wrapper rightCharts">
        <div class="wrapper-content">
          <dv-border-box-13>
            <TotalChart />
          </dv-border-box-13>
        </div>
        <div class="wrapper-content">
          <dv-border-box-12>
            <InternalChart />
          </dv-border-box-12>
        </div>
        <div class="wrapper-content">
          <dv-border-box-12>
            <ExternalChart />
          </dv-border-box-12>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import ClassChart from "./left-chart/ClassChart";
import DiningChart from "./left-chart/DiningChart";
import SceneryChart from "./left-chart/SceneryChart";
import NumMap from "./center/NumMap.vue"
import TotalChart from "./right-chart/TotalChart";
import InternalChart from "./right-chart/InternalChart";
import ExternalChart from "./right-chart/ExternalChart";
export default {
  data() {
    return {
    };
  },
  components: {
    ClassChart,
    SceneryChart,
    TotalChart,
    NumMap,
    DiningChart,
    InternalChart,
    ExternalChart,
  },
};
</script>

<style lang="scss" scoped>
#home {
  height: 100%;
  overflow: hidden;
}
.leftCharts {
  position: absolute;
  top: 4px;
  left: 0;
  width: 300px;
  z-index: 10000;
}
.rightCharts {
  position: absolute;
  top: 4px;
  right: 0%;
  width: 300px;
  z-index: 10000;
}
.wrapper {
  width: 508px;
  height: 930px;
}
.wrapper-content {
  margin-bottom: 16px;
  height: 33.3%;
}
</style>
